@import "variables";

grant-page{
  seed-avatar{
    width: pxTorem(90);
    height: pxTorem(90);
  }
  .auth-box{
    .seed-grid-row{
      padding:pxTorem(40) pxTorem(30);
      .auth-rights{
        display: flex;
        align-items: center;
        width: 100%;
        .auth-info{
          width: 85%;
        }
        .auth-org-name{
          margin-bottom:pxTorem(16);
          display: flex;
          align-items: center;
          width: 100%;
          p{
            font-size: pxTorem(30);
            color:color($h5,c2);
            margin-right:pxTorem(14);
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            max-width: pxTorem(385);
            display: block;
          }
          img{
            height:pxTorem(26);
            margin:0;
          }
        }
        .auth-service-type span{
          font-size: pxTorem(24);
          color:color($h5,c4);
        }
      }
      .row-item {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: pxTorem(45px) 0 pxTorem(31px);
        span:first-child {
          display: block;
          width:pxTorem(54);
          height:pxTorem(54);
          padding-bottom: pxTorem(15px);
          background-size: pxTorem(54) pxTorem(54);
          margin-bottom:pxTorem(15);
        }
        img{
          width:pxTorem(54);
          height:pxTorem(54);
          //padding-bottom: pxTorem(15px);
          //background-size: pxTorem(54) pxTorem(54);
          margin-bottom:pxTorem(15);
        }
        span:last-child {
          @include set-color(c3);
          @include font-dpr(24px);
        }
      }
    }
  }
  .role-bottom{
    padding:pxTorem(30) pxTorem(30);
    text-align: center;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    color:#6E6E6E;
    .role-item{
      width: 25%;
      margin-bottom: pxTorem(70);
      p:first-child{
        text-align: center;
        img{
          width: pxTorem(54);
        }
      }
    }
  }
}
@media screen and (max-width: 675px) {
  .auth-org-name{
    p{
      max-width: pxTorem(330)!important;;
    }
  }
}

